﻿<FluentInputFile @ref="@myFileUploader" 
                 DragDropZoneVisible="false"
                 Mode="InputFileMode.SaveToTemporaryFolder"
                 Multiple="true"
                 AnchorId="MyUploadButton"
                 MaximumFileSize="@(100 * 1024 * 1024)"
                 Accept=".mp4, .mov, .avi"
                 OnProgressChange="@(e =>
                     {
                         progressPercent = e.ProgressPercent; 
                         progressTitle = e.ProgressTitle;
                     })"
                 OnCompleted="@OnCompleted" />

<FluentProgress Min="0" Max="100" Visible="@(progressPercent > 0)" Value="@progressPercent" />
<FluentLabel Alignment="HorizontalAlignment.Center">
    @progressTitle
</FluentLabel>

<FluentButton Id="MyUploadButton" Appearance="Appearance.Accent">
    Upload files
</FluentButton>

@if (Files.Any())
{
    <h4>File(s) uploaded:</h4>
    <ul>
        @foreach (var file in Files)
        {
            <li>
                <b>@file.Name</b> 🔹
                @($"{Decimal.Divide(file.Size, 1024):N} KB") 🔹
                @file.ContentType 🔹
                @file.LocalFile?.FullName
                @file.ErrorMessage
            </li>
        }
    </ul>
}

@code
{
    FluentInputFile? myFileUploader = default!;
    int? progressPercent;
    string? progressTitle;

    FluentInputFileEventArgs[] Files = Array.Empty<FluentInputFileEventArgs>();

    void OnCompleted(IEnumerable<FluentInputFileEventArgs> files)
    {
        Files = files.ToArray();
        progressPercent = myFileUploader!.ProgressPercent;
        progressTitle = myFileUploader!.ProgressTitle;

        // For the demo, delete these files.
        foreach (var file in Files)
        {
            file.LocalFile?.Delete();
        }
    }
}
